<template>
  <div class="box" align="right" style="height: 300px;">

    设备名开始:
    <vxe-input v-model="设备名起始" placeholder="设备名起始" type="integer"></vxe-input><br />

    设备名结束:
    <vxe-input v-model="设备名结束" placeholder="设备名结束" type="integer"></vxe-input><br />

    一台设备分配数量:
    <vxe-input v-model="每台分配数量" placeholder="每台分配数量" type="integer"></vxe-input><br />

    标记:
    <vxe-pulldown ref="xDown1">
      <template #default>
        <vxe-input  v-model="value1" placeholder="可搜索的下拉框" @focus="focusEvent1" @keyup="keyupEvent1"></vxe-input>
      </template>
      <template #dropdown>
        <div class="my-dropdown1">
          <div class="list-item1" v-for="item in list1" :key="item.value" @click="selectEvent1(item)">
            <i class="fa fa-user-o"></i>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </template>
    </vxe-pulldown>

    <div>
      <p><vxe-button status="primary" content="确定" @click="提交" :loading="加载中" ></vxe-button></p>
    </div>

  </div>

</template>

<script>
export default {
  data() {
    return {
      list1:[],
      value1:"",
      设备名起始: 1,
      设备名结束: 10,
      每台分配数量: 1,
      标记: "",
      加载中: false,
    };
  },
  created() {
    this.$请求('/get/select/qufu/name',{},(obj)=>{
      if(obj.data.code==1){
        const result=obj.data.data.markArr
        const list1=result.map(x=>{
          return {label:x.账号标记,value:x.账号标记}
        });
        this.data1 = list1
        this.list1 = list1
      }
    })
  },
  methods: {
    focusEvent1 () {
      this.$refs.xDown1.showPanel()
    },
    keyupEvent1 () {
      const { value1 } = this
      this.list1 = value1 ? this.data1.filter(item => item.label.indexOf(value1) > -1) : this.data1
    },
    selectEvent1 (item) {
      this.value1 = item.label
      this.$refs.xDown1.hidePanel().then(() => {
        this.list1 = this.data1
      })
    },
    提交() {
      if (!this.设备名起始 || !this.设备名结束 || !this.每台分配数量) {
        this.$XModal.alert({
          content: "输入错误.请检查",
          status: "error",
        });
        return;
      }
      if (this.设备名起始 > this.设备名结束) {
        this.$XModal.alert({
          content: "起始值大于结束值范围错误",
          status: "error",
        });
        return;
      }
      const 地址 = "/fenpei/rootnumber";
      const 提交数据 = {
        开始编号: parseInt(this.设备名起始),
        结束编号: parseInt(this.设备名结束),
        分配数量: parseInt(this.每台分配数量),
        账号标记: this.value1,
      };
      const 成功提示 = (response) => {
        this.加载中=false
        this.$XModal.message({ content: "分配成功", status: "success" });
      };
      const 失败提示 = (response) => {
        this.加载中=false
        this.$XModal.message({ content: "分配失败", status: "success" });
      };
      this.加载中=true
      this.$请求(地址, 提交数据, 成功提示, 失败提示);
    },

  },

};
</script>

<style>

.my-dropdown1 {
  height: 155px;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
}
.list-item1:hover {
  background-color: #f5f7fa;
}
</style>
